<template>
    <div ref="chart" id="chart"></div>
</template>
<script lang='ts' setup>
import { useDebounceFn } from '@vueuse/core';
import { inject, onMounted, ref, watch } from 'vue';


const props = defineProps<{
    title?: string,
    textColor?: string
    xData: string[],
    yData: any[],
    color?: string[]
    orientType?: string
}>()

const echarts = inject('echarts') as any
const chart = ref()

const color = ['#9d7dff', '#9abdff', '#fda247', '#00DEF2', '#9abdff', '#fda247', '#31f5c1', '#ba36fc']
const legend = ['科室试管总数', '科室已取数量', '科室未取数量', '病区试管总数', '病区已取数量', '病区未取数量']

let chartInstance: any

watch(() => [props.xData, props.yData,], () => {
    if (chartInstance) {
        const options = getOption()
        chartInstance.setOption(options)
    }
}, { deep: true })

// console.log(props.xData);


function getSeries() {
    console.log(props.yData);

    return props.yData.map((item, index) => ({
        name: legend[index],
        type: index == 0 || index == 3 ? 'line' : 'bar',
        // type: 'bar',
        showBackground: true,
        stack: index == 1 || index == 2 ? 'a' : index == 4 || index == 5 ? 'b' : null,
        label: {
            show: index == 0 || index == 3 ? true : false,
            position: index == 0 || index == 3 ? 'top' : ''
        },
        areaStyle: {
            color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                    offset: 0,
                    color: color[index] // 0% 处的颜色
                }, {
                    offset: 1,
                    color: '#fff' // 100% 处的颜色
                }
                ]
            }
        },
        // smooth: true,
        data: item
    }))
}

function getOption() {
    return {
        title: {
            text: props.title,
            textStyle: {
                fontSize: 14,
                fontFamily: '黑体',
                color: props.textColor ? props.textColor : '#fff'
            }
        },
        color: props.color ? props.color : color,
        tooltip: {
            trigger: 'axis',
        },
        grid: {
            bottom: '20%'
        },
        legend: {
            top: 20,
            right: 0,
            itemWidth: 10,
            itemHeight: 10,
            itemGap: 5,
            itemStyle: {
                borderWidth: 0,
            },
            textStyle: {
                color: props.textColor ? props.textColor : '#fff'
            },
            selected: {
                科室试管总数: true,
                科室已取数量: true,
                科室未取数量: true,
                病区试管总数: false,
                病区已取数量: false,
                病区未取数量: false,
            },
            data: [{ name: '科室试管总数' }, { name: '病区试管总数' }]
        },
        xAxis: {
            type: 'category',
            data: props.xData[0],
            axisLabel: {
                // rotate: -90,
                formatter: function (value: string) {
                    return value.split('').join('\n')
                }
            }
        },
        yAxis: {
            type: 'value',
        },
        dataZoom: {
            start: 0,
            end: 10
        },
        series: getSeries()
    }
}

onMounted(() => {
    chartInstance = echarts.init(chart.value)
    const option = getOption()

    chartInstance.setOption(option)
    const handleResize = useDebounceFn(() => {
        chartInstance.resize()
    }, 1000)

    window.addEventListener('resize', () => handleResize())



    chartInstance.on('legendselectchanged', function (event: any) {
        // console.log(event);
        if (event.selected.科室试管总数 && event.name == '科室试管总数') {
            chartInstance.setOption({
                legend: {
                    selected: {
                        科室试管总数: true,
                        科室已取数量: true,
                        科室未取数量: true,
                        病区试管总数: false,
                        病区已取数量: false,
                        病区未取数量: false,
                    },
                },
                xAxis: {
                    type: 'category',
                    data: props.xData[0]
                },
            })
        } else if (event.selected.病区试管总数 && event.name == '病区试管总数') {
            chartInstance.setOption({
                legend: {
                    selected: {
                        科室试管总数: false,
                        科室已取数量: false,
                        科室未取数量: false,
                        病区试管总数: true,
                        病区已取数量: true,
                        病区未取数量: true,
                    },
                },
                xAxis: {
                    type: 'category',
                    data: props.xData[1]
                },
            })
        } else {
            chartInstance.setOption({
                legend: {
                    selected: {
                        科室试管总数: false,
                        科室已取数量: false,
                        科室未取数量: false,
                        病区试管总数: false,
                        病区已取数量: false,
                        病区未取数量: false,
                    },
                }
            })
        }
    });
})

</script>
<style lang='scss' scoped>
#chart {
    width: 100%;
    height: 100%;
}
</style>